<template>
  <div>
    <base-modal
      :title="title"
      width="500px"
      v-if="show"
      :show.sync="show"
      class="type-modal-body">
      <el-form label-position="top" :model="info" :rules="rules" ref="ruleForm">
        <el-form-item :label="$t('wiki.list.typeModal.label1')" prop="name">
          <el-input class="title" v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('wiki.list.typeModal.label2')" class="type-form">
          <el-select v-model="info.parentId" class="type" clearable :disabled="value.parentId == null">
            <el-option v-for="(item, index) in info.options" :key="`${item.value}_${index}`" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="edit-footer">
        <p class="prompt">{{$t('wiki.list.typeModal.des1')}}</p>
        <el-button type="primary" @click="sumbitType">{{$t('common.base.confirm')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import i18n from '@src/locales'
export default {
  name: 'type-modal',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      show: false,
      info: this.value,
      rules: {
        name: [
          { required: true, message: i18n.t('wiki.list.typeModal.msg1'), trigger: 'blur' },
          { max: 20, message: i18n.t('wiki.list.typeModal.msg2'), trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    open () {
      this.show = true;
    },
    sumbitType () {
      this.$refs.ruleForm.validate((valid) => {
        if(valid) {
          this.$emit('sumbitType');
        }
      })
    },
    close () {
      this.show = false;
    }
  }
}
</script>

<style lang="scss">
.type-modal-body {

  .base-modal-body {
    padding: 10px 30px 10px;

    .el-form-item {
      margin: 0;
      line-height: 32px;
    }

    .title {
      width: 355px;
    }

    .type-form {
      margin-top: 20px !important;
    }

    .type {
      width: 355px;
    }

  }

  .base-modal-footer {
    padding: 15px 30px 15px 45px;
  }
  .edit-footer {
    display: flex;
    justify-content: space-between;

    .prompt {
      display: inline-block;
      margin: 0;
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
}

</style>